/**
 * 教师请假管理
 */
import { useState } from 'react';
import {
  Table,
  Radio,
  Space,
  Input,
  DatePicker,
  Select,
  Button,
  Divider,
  Form,
  Tabs,
} from 'antd';
import style from './index.less';
import * as React from 'react';
import request from '@/http';
import { check } from 'prettier';
import { history } from '@/.umi/core/history';
import All_style from '../../index.less';
import { Link } from 'react-router-dom';
import moment from 'moment';

const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Option } = Select;
const columns = [
  {
    title: '请假提交日期',
    dataIndex: 'vacation_submitdate',
    key: 'vacation_submitdate',
  },
  {
    title: '院系',
    dataIndex: 'college_name',
    key: 'college_name',
  },
  {
    title: '专业',
    dataIndex: 'major_name',
    key: 'major_name',
  },
  {
    title: '年级',
    dataIndex: 'grade_name',
    key: 'grade_name',
  },
  {
    title: '班级',
    dataIndex: 'class_name',
    key: 'class_name',
  },
  {
    title: '学号',
    dataIndex: 'student_id',
    key: 'student_id',
  },
  {
    title: '姓名',
    dataIndex: 'student_name',
    key: 'student_name',
  },
  {
    title: '主题',
    dataIndex: 'vacation_theme',
    key: 'vacation_theme',
  },
  {
    title: '请假原因',
    dataIndex: 'vacation_reason',
    key: 'vacation_reason',
  },
  {
    title: '原因说明',
    dataIndex: 'vacation_explain',
    key: 'vacation_explain',
  },
  {
    title: '请假开始时间',
    dataIndex: 'vacation_begindate',
    key: 'vacation_begindate',
  },
  {
    title: '请假结束时间',
    dataIndex: 'vacation_enddate',
    key: 'vacation_enddate',
  },
  {
    title: '审批状态',
    dataIndex: 'vacation_status',
    key: 'vacation_status',
  },
  {
    title: '操作',
    // dataIndex: 'active',
    key: 'active',
    render: (row) => (
      <>
        <Link
          to={{
            pathname: '/Teacher/Leave/edit',
            state: { student_id: row.student, id: row.id },
          }}
        >
          处理
        </Link>
      </>
    ),
  },
];

interface DataType {
  key: React.Key;
  vacation_submitdate: string;
  college_name: string;
  major_name: string;
  grade_name: string;
  class_name: string;
  student_id: string;
  student_name: string;
  vacation_theme: string;
  vacation_reason: string;
  vacation_explain: string;
  vacation_begindate: string;
  vacation_enddate: string;
  vacation_status: string;
}

const rowSelection = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows,
    );
  },
};

const Leave = (props: any) => {
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>(
    'checkbox',
  );
  const [formObject] = Form.useForm();
  const [captchaUrl, setCaptchaUrl] = React.useState('');
  // 请假原因下拉框绑定接口
  const [vacationReason, setVacationReason] = React.useState([]);
  const getVacationReason = async () => {
    const WorkType: any = await request.put(
      '/user_info_manage/getVacationReason',
    );
    setVacationReason(WorkType.data);
  };
  //班级下拉框绑定接口
  const [className, setClassName] = React.useState([]);
  const getClassName = async () => {
    const className: any = await request.put('/user_info_manage/getClassName');
    setClassName(className.data);
  };
  // 院系下拉框绑定接口
  const [collegeName, setCollegeName] = React.useState([]);
  const getCollegeName = async () => {
    const collegeName: any = await request.put(
      '/user_info_manage/getCollegeName',
    );
    setCollegeName(collegeName.data);
  };
  //专业下拉框接口
  const [majorName, setMajorName] = React.useState([]);
  const getMajorName = async () => {
    const majorName: any = await request.put('/user_info_manage/getMajorName');
    setMajorName(majorName.data);
  };
  // 年级下拉框绑定接口
  const [gradeName, setGradeName] = React.useState([]);
  const getGradeName = async () => {
    const gradeName: any = await request.put('/user_info_manage/getGradeName');
    setGradeName(gradeName.data);
  };

  // 条件查询请假管理表
  interface pay {
    current: number;
    pageSize: number;
    total: number;
    onChange: any;
  }
  const onCurrentChange = (page, pageSize) => {
    loadData(page, pageInfo.pageSize);
  };
  const [pageInfo, setPageInfo] = useState<pay>({
    current: 1,
    pageSize: 5,
    total: 0,
    onChange: onCurrentChange,
  });
  const [data, setData] = React.useState();
  const loadData = async (current, pageSize) => {
    const selectForm = await formObject.validateFields(); //获得表单数据
    console.log(selectForm);
    // 处理日期数据
    const date1 = selectForm?.vacation_submitdate
      ? selectForm?.vacation_submitdate[0]?.format('YYYY-MM-DD hh:mm:ss')
      : '';
    const date2 = selectForm?.vacation_submitdate
      ? selectForm?.vacation_submitdate[1]?.format('YYYY-MM-DD hh:mm:ss')
      : '';
    // 绑定接口获得数据
    const result: any = await request.post(
      '/ask_for_leave/teach/teacher/ask/all',
      {
        page: current,
        number: pageSize,
        className: selectForm.class_name,
        gradeName: selectForm.grade_name,
        studentNo: selectForm.student_id,
        collegeName: selectForm.college_name,
        majorName: selectForm.major_name,
        studentName: selectForm.student_name,
        vacationReason: selectForm.vacation_reason,
        vacationStatus: selectForm.vacation_status,
        vacationEndDate: date2,
        vacationBeginDate: date1,
        vacationExplain: selectForm.vacation_explain,
        vacationTheme: selectForm.vacation_theme,

        // vacationSubmitDate: selectForm.vacation_submitdate,
      },
    );
    console.log(result);
    if (result.success) {
      const newData = result.data.returnDate.map((d, index) => {
        return {
          id: d.id,
          key: `k_${index}`,
          vacation_submitdate: d.vacationSubmitDate,
          college_name: d.collegeName,
          major_name: d.majorName,
          grade_name: d.gradeName,
          class_name: d.className,
          student_id: d.studentNo,
          vacation_theme: d.vacationTheme,
          student_name: d.studentName,
          vacation_reason: d.vacationReason,
          vacation_status: d.vacationStatus,
          vacation_enddate: d.vacationEndDate,
          vacation_begindate: d.vacationBeginDate,
          vacation_explain: d.vacationExplain,
          student: d.studentId,
        };
      });
      setPageInfo({
        current: result?.data?.paginationData?.currentPage,
        pageSize: result?.data?.paginationData?.number,
        total: result?.data?.paginationData?.sum,
        onChange: pageInfo.onChange,
      });
      setData(newData);
    }
  };
  // 重置按钮
  const onReset = () => {
    formObject.resetFields();
    console.log('重置成功');
  };
  // 页面预加载
  React.useEffect(() => {
    loadData(pageInfo.current, pageInfo.pageSize);
    getVacationReason();
    getClassName();
    getCollegeName();
    getMajorName();
    getGradeName();
  }, []);
  return (
    <div className={All_style.box}>
      <Form form={formObject}>
        <div>
          <div style={{ clear: 'both' }}>
            <Form.Item
              label="申请提交日期："
              name="vacation_submitdate"
              style={{ float: 'left' }}
              className={All_style.data}
            >
              <RangePicker></RangePicker>
            </Form.Item>
            <Form.Item
              label="院系："
              name="college_name"
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Select
                allowClear
                placeholder="请选择"
                className={All_style.select}
                optionFilterProp="children"
                showSearch
              >
                {collegeName.map((c, index) => {
                  return (
                    <Option key={`k_${index}`} value={c}>
                      {c}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>

            <Form.Item
              label="专业："
              name="major_name"
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Select
                allowClear
                placeholder="请选择"
                className={All_style.select}
                optionFilterProp="children"
                showSearch
              >
                {majorName.map((c, index) => {
                  return (
                    <Option key={`k_${index}`} value={c}>
                      {c}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ clear: 'both' }}>
            <Form.Item
              label="年级："
              name="grade_name"
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Select
                allowClear
                placeholder="请选择"
                className={All_style.select}
                optionFilterProp="children"
                showSearch
              >
                {gradeName.map((c, index) => {
                  return (
                    <Option key={`k_${index}`} value={c}>
                      {c}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
            <Form.Item
              label="班级："
              name="class_name"
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Select
                allowClear
                placeholder="请选择"
                className={All_style.select}
                optionFilterProp="children"
                showSearch
              >
                {className.map((c, index) => {
                  return (
                    <Option key={`k_${index}`} value={c}>
                      {c}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>

            <Form.Item
              label="学号："
              name="student_id"
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Input
                placeholder="精准匹配"
                className={All_style.select}
                allowClear
              />
            </Form.Item>
          </div>

          <div style={{ clear: 'both' }}>
            <Form.Item
              label="学生姓名："
              name="student_name"
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Input
                placeholder="支持模糊查询"
                className={All_style.select}
                allowClear
              />
            </Form.Item>

            <Form.Item
              label="主题"
              name="vacation_theme"
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Input
                placeholder="请输入"
                className={All_style.select}
                allowClear
              />
            </Form.Item>

            <Form.Item
              label="请假原因："
              name="vacation_reason"
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Select
                allowClear
                placeholder="请选择"
                className={All_style.select}
                optionFilterProp="children"
                showSearch
              >
                {vacationReason.map((c, index) => {
                  return (
                    <Option key={`k_${index}`} value={c}>
                      {c}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ clear: 'both' }}>
            <Form.Item
              label="审批状态"
              name="vacation_status"
              style={{ float: 'left' }}
              className={All_style.formItem}
            >
              <Select
                allowClear
                placeholder="请选择"
                className={All_style.select}
                optionFilterProp="children"
                showSearch
              >
                <Option value="审批不通过">审批不通过</Option>
                <Option value="审批已通过">审批已通过</Option>
              </Select>
            </Form.Item>

            <Button
              onClick={() => loadData(pageInfo.current, pageInfo.pageSize)}
              className={All_style.button}
            >
              查询
            </Button>
            <Button onClick={onReset} className={All_style.button2}>
              重置
            </Button>
          </div>
        </div>
      </Form>

      <div style={{ clear: 'both' }}>
        <Button className={All_style.button}>审批通过</Button>
        <Button className={All_style.button}> 审批不通过</Button>
        <Radio.Group
          onChange={({ target: { value } }) => {
            setSelectionType(value);
          }}
          value={selectionType}
        ></Radio.Group>

        <Table
          rowSelection={{ type: selectionType, ...rowSelection }}
          columns={columns}
          dataSource={data}
          className={All_style.table}
        />
      </div>
    </div>
  );
};

export default Leave;
